<template>
	<div class="passengerFlowAnalysis">
		<div class="banner">
			<h1>客流实时动态分析，赋能商家</h1>
			<p>助力商家发现潜在机会和改进措施，为高效精细化运营提供全方位数据参考</p>
		</div>
		<div class="container1">
			<div class="title">关于客流分析</div>
			<p>智加云运用AI技术实时监测客流情况，精准监控客流质量，实时展示客流转化情况，</p>
			<p>助力商家发现潜在机会和改进措施，为高效精细化运营提供全方位数据参考。</p>
		</div>
		<div class="container2">
			<div class="title">客流监测</div>
			<img src="./img/product_keliu_content1@3x.png" alt="">
			<p>自有感知节点采集线下用户行为数据+合作伙伴感知数据+其它类型的用户数据</p>
			<p>客流情况实时监测，客流数据实时更新</p>
			<p>运用大数据算法对采集数据进行分析，实时查看线下人群密集程度</p>
			<p>历史数据分析多维度对比，赋能商家客流管控</p>
		</div>
		<div class="container3">
			<div class="title">客流管理</div>
			<p>智加云提供客流CRM管理系统，针对新老顾客比例，到访时间，顾客活跃度清晰展示，便于及时掌握顾客的构成，为销售策略调整提供参考+合作伙伴感知数据+其它类型的用户数据</p>
			<img src="./img/product_keliu_content2@3x.png" alt="">
			<div class="con">
				<div class="item">
					<img src="./img/product_keliu_icon1@3x.png" alt="">
					<span>客流数据</span>
					<span>实时更新</span>
				</div>
				<div class="item">
					<img src="./img/product_keliu_icon2@3x.png" alt="">
					<span>客户比例</span>
					<span>多维度分析</span>
				</div>
				<div class="item">
					<img src="./img/product_keliu_icon3@3x.png" alt="">
					<span>历史数据横纵向</span>
					<span>对比，趋势分析</span>
				</div>
			</div>
		</div>
		<div class="container4">
			<div class="title">客流转化</div>
			<p>通过大数据算法将获取的客流数据多维度分析，助力商家精准营销。</p>
			<img src="./img/product_keliu_content3@3x.png" alt="">
			<div class="con">
				<div class="item">
					<img src="./img/product_keliu_icon4@3x.png" alt="">
					<span>时间维度分析</span>
					<span>历史数据分析</span>
				</div>
				<div class="item">
					<img src="./img/product_keliu_icon2@3x.png" alt="">
					<span>顾客的转化</span>
					<span>入店量/入店率</span>
				</div>
				<div class="item">
					<img src="./img/product_keliu_icon3@3x.png" alt="">
					<span>趋势分析</span>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'passengerFlowAnalysis',
	}
</script>

<style lang="stylus" scoped>
	.passengerFlowAnalysis{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_keliu_banner@3x.png') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 55.6%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			height: 4.3rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				padding: 0 6%;
			}
		}
		.container2{
			width: 100%;
			height: 12.15rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			img{
				width: 4.11rem;
				height: 3.89rem;
				margin-bottom: 0.5rem;
			}
			p{
				width: 84%;
				margin: 0.1rem 4%;
				padding: 0.2rem 4%;
				font-size: 0.3rem;
				line-height: 0.5rem;
				color: #666;
				border: 1px solid #D0DEF5;
				border-radius: 0.1rem;
				text-align: center;
			}
		}
		.container3{
			width: 100%;
			height: 10.60rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: linear-gradient(0deg, #233574 0%, #0D183E 99%);
			.title{
				font-size: 0.36rem;
				color: #fff;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: rgba(255,255,255,0.8);
				line-height: 0.5rem;
				padding: 0 6%;
				margin-bottom: 0.5rem;
			}
			img{
				width: 4.11rem;
				height: 3.89rem;
				margin-bottom: 0.5rem;
			}
			.con{
				width: 92%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.item{
					width: 2.22rem;
					height: 1.6rem;
					display: flex;
					flex-direction: column;
					background: rgba(59,174,252,0.9);
					border-radius: 0.1rem;
					-ms-align-items: center;
					align-items: center;
					justify-content: center;
					img{
						width: 0.44rem;
						height: 0.44rem;
						margin-bottom: 0.1rem;
					}
					span{
						font-size: 0.24rem;
						line-height: 0.3rem;
						color: rgba(255,255,255,0.8);
					}
				}
			}
		}
		.container4{
			width: 100%;
			height: 9.8rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: rgba(102,102,102,0.8);
				line-height: 0.5rem;
				padding: 0 6%;
				margin-bottom: 0.5rem;
			}
			img{
				width: 4.11rem;
				height: 3.89rem;
				margin-bottom: 0.5rem;
			}
			.con{
				width: 92%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.item{
					width: 2.22rem;
					height: 1.6rem;
					display: flex;
					flex-direction: column;
					background: rgba(59,174,252,0.9);
					border-radius: 0.1rem;
					-ms-align-items: center;
					align-items: center;
					justify-content: center;
					img{
						width: 0.44rem;
						height: 0.44rem;
						margin-bottom: 0.1rem;
					}
					span{
						font-size: 0.24rem;
						line-height: 0.3rem;
						color: rgba(255,255,255,0.8);
					}
				}
			}
		}
	}
</style>

